<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>数据库管理系统</title>
<meta charset="UTF-8"></meta>
<link rel="stylesheet" type="text/css" href="../themes/metro/easyui.css"></link>
<link rel="stylesheet" type="text/css" href="../themes/icon.css"></link>
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript" src="../index.js"></script>
</head>
<body class="easyui-layout" >
        <div data-options="region:'north'" style="height:30px">
		        <a href="${pageContext.request.contextPath}/" target="_blank" class="easyui-linkbutton" data-options="plain:true">新窗口</a>
		        <a href="#" class="easyui-linkbutton" data-options="plain:true" onclick="openConnection()">连接</a>
        </div>
        
        <div data-options="region:'east',split:true" title="存储SQL" style="width:10%;">
        	  <div id="sqlStatement" class="easyui-accordion" style="width:100%">
        	  </div>
        </div>
        <div data-options="region:'west',split:true" title="数据库表" style="width:10%;">
        	<ul id="tableNames" class="easyui-tree"  ></ul>
        </div>
        <div data-options="region:'center'">
        	<div class="easyui-layout" data-options="fit:true">
	       		<div data-options="region:'north',split:true" style="height:40%">
	       			<form id="sqlForm" method="post" style="height:80%">
	       			 	<div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:100%;height:100%">
					    </div>
					    <div id="tab-tools">
					        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="addPanel()"></a>
					        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" onclick="removePanel()"></a>
					    </div>
			            <div style="text-align:center;">
				            <input type="button" onclick="sqlFormSubmit()" value="运行"></input>
				            <input type="button" onclick="$('#sqlForm').form('clear');" value="清空"></input>
				            <input type="button" onclick="openSaveSql()" value="保存查询结果"></input>
				        </div>
				    </form>
				</div>
				<div data-options="region:'center'" style="height:60%">
		            <table id="sqlTable" class="easyui-datagrid" >
		            </table>
		         </div>
		    </div>
        </div>
       <!-- 数据库连接 start -->
     <div id="dlg" class="easyui-dialog" style="width:400px"
            closed="true" buttons="#dlg-buttons">
        <form id="fm" method="post" style="margin:0;padding:20px 50px" >
             <div style="margin-bottom:10px">
                <input id="initConnection" class="easyui-combobox" name="id" required="true"  label="主机地址:" style="width:100%"></input>
            </div>
        </form>
    </div>
    <div id="dlg-buttons">
    	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" onclick="openConnectionCreate()" style="width:80px">创建</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="connection()" style="width:80px">连接</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="$('#dlg').dialog('close')" style="width:80px">取消</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" onclick="deleteConnection()" style="width:80px">删除</a>
    </div>
    
    <div id="dlg1" class="easyui-dialog" style="width:400px"
            closed="true" buttons="#dlg1-buttons">
        <form id="createConnection" method="post" style="margin:0;padding:20px 50px" >
        <div style="margin-bottom:10px">
                <input name="showname" id="showname" class="easyui-textbox" required="true" label="显示名称:" style="width:100%"></input>
            </div>
            <div style="margin-bottom:10px">
                <input name="url" id="url" class="easyui-textbox" required="true" label="主机地址:" style="width:100%"></input>
            </div>
            <div style="margin-bottom:10px">
                <input name="username" id="username" class="easyui-textbox" required="true" label="用户名:" style="width:100%"></input>
            </div>
            <div style="margin-bottom:10px">
                <input name="password" id="password" class="easyui-textbox" type="password" required="true" label="密码:" style="width:100%"></input>
            </div>
             <div style="margin-bottom:10px">
                <input name="driverClass" id="driverClass" class="easyui-textbox" required="true" label="驱动名称:" style="width:100%"></input>
            </div>
             <div style="margin-bottom:10px">
                <input name="validationQuery" id="validationQuery" class="easyui-textbox" value="SELECT 1" required="true" label="验证查询:" style="width:100%"></input>
            </div>
             <div style="margin-bottom:10px">
                <input name="sort" id="sort" class="easyui-textbox" label="排序:" style="width:100%"></input>
            </div>
        </form>
    </div>
    <div id="dlg1-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveConnection()" style="width:90px">创建</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg1').dialog('close')" style="width:90px">取消</a>
    </div>
    
    <div id="savesql" class="easyui-dialog" style="width:400px"
            closed="true" buttons="#savesql-buttons">
        <form id="savesqlForm" method="post" style="margin:0;padding:20px 50px" >
        <div style="margin-bottom:10px">
                <input name="name" id="saveSqlName" class="easyui-textbox" required="true" label="名称:" style="width:100%"></input>
            </div>
            <div style="margin-bottom:10px">
                <input name="memo" id="saveSqlMemo" class="easyui-textbox" required="false" label="备注:" style="width:100%;height:60px"></input>
            </div>
        </form>
    </div>
    <div id="savesql-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveSql()" style="width:90px">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#savesql').dialog('close')" style="width:90px">取消</a>
    </div>
    
    <div id="mm" class="easyui-menu" style="width:120px;">
		<div onclick="selectSql()" data-options="iconCls:'icon-search'">select</div>
		<div onclick="insertSql()" data-options="iconCls:'icon-add'">insert</div>
		<div onclick="updateSql()" data-options="iconCls:'icon-edit'">update</div>
		<div onclick="deleteSql()" data-options="iconCls:'icon-remove'">delete</div>
	</div>
</body>
</html>
